
<script type="text/javascript">
    $(document).ready(function(){
        $('#bt_add_hot_product').click(function(){
            if($('#cb_product').val() != ''){
                $.post('~product/addHotProduct',{productUri : $('#cb_product').val()},function(data){
                    if(data.indexOf('OK') != -1){
                        var uri = $('#cb_product').val();
                        var ar = uri.split('/');
                        var productId = ar[ar.length-1];
                        var sRow = '<tr val="' + uri +'">';
                        sRow +=         '<td><img src="'+ $('#path').val() + '/upload/' + $('#cb_product_image').val() +'" ></td>';
                        sRow +=         '<td><a href="' + uri + '">'+ productId +'<a></td>';
                        sRow +=         '<td>'+ $('#cb_product_name').val() +'</td>';
                        sRow +=         '<td>'+ $('#cb_product_userName').val() +'</td>';
                        sRow +=         '<td>'+ $('#cb_product_categoryName').val() +'</td>';
                        sRow +=         '<td><button class="edit_hot_product link_button" style="margin-right:10px;">Edit</button><button class="remove_product link_button">Remove</button></td>';
                        sRow +=     '</tr>';
                        $('.list_hot_product tbody').append(sRow);
                    }
                });
            }
        });
        $('#edit_hot_product_form').dialog({
            'autoOpen':false,
            'width':600,
            'height':438,
            'resizable':false,
            'modal':true,
            'title': 'Change hot image',
            'dialogClass':'fixed-dialog',
        });
        $('.list_hot_product').on('click','.edit_hot_product',function(){
            var productUri = $(this).closest('tr').attr('val');
            $.post('~product/loadImageOfProduct',{productUri : productUri},function(data){
                $('#edit_hot_product_form').html(data);
                $('#edit_hot_product_form').dialog('open');
                $('.image_tool').css('right','-200px');
                $('.image_tool').css('display','block');
            });
        }); 
    });
</script>

<div class="admin_header_title">HOT PRODUCTS</div>
<div class="metro_table orange_metro_style">
    <div class="metro_table_title"><i class="fa fa-bars"></i> Add a New Hot Products</div>
    <div class="metro_table_content">
        <div style="padding: 20px;text-align: center;">
            <?php
                $aParams = array(
                    'aValue' => $template->get('aProducts'),
                    'header' => 'List Product',
                    'headerWidth' => '120px',
                    'stringTitle' => 'name',
                    'stringKey' => 'uri',
                    'width' => '300px',
                    'image' => true,
                    'id' => 'cb_product',
                    'showData' => true,
                    'data' => array('name','image','userName','categoryName'),
                );
                includeBlock('block/customComboboxBlock',$aParams);
            ?>
            <button id="bt_add_hot_product" class="flat_metro_button green_metro_style">Add <i class="fa fa-plus"></i></button>
        </div>
    </div>
</div>
<div class="metro_table green_metro_style">
    <div class="metro_table_title"><i class="fa fa-bars"></i> List Hot Products</div>
    <div class="metro_table_content">
        <div style="padding: 20px;">
            <table class="list_hot_product">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Product ID</th>
                        <th>Name</th>
                        <th>OwnUser</th>
                        <th>Category</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($template->get('aHotProducts'))
                        {
                            foreach($template->get('aHotProducts') as $aProduct)
                            {
                                $aParams = explode('/',$aProduct['product']);
                                echo '<tr val="'.$aProduct['product'].'">';
                                echo '<td><img src="'.URL::getLink('upload/'.(isset($aProduct['image']) ? $aProduct['image'] : $aProduct['defaultImage'])).'"></td>';
                                echo '<td>'.end($aParams).'</td>';
                                echo '<td>'.$aProduct['name'].'</td>';
                                echo '<td>'.$aProduct['userName'].'</td>';
                                echo '<td>'.$aProduct['categoryName'].'</td>';
                                echo '<td><button class="table_bt_metro_edit edit_hot_product"><i class="fa fa-pencil"></i></button><button class="table_bt_metro_delete remove_product"><i class="fa fa-trash-o"></i></button></td>';
                                echo '</tr>';
                            }
                        }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="edit_hot_product_form">

</div>